<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES6新增了箭头函数
        // 箭头函数定义：表达式方式进行定义（将箭头函数赋值变量）
        // 语法：
        // let 变量名 = ([参数,...])=>{
        //     函数体
        //     [return 返回值]
        //  }


        // 1.基本使用
        // 定义
        let fn1 = () => {
            console.log("哈哈");
        }

        //调用
        fn1();


        // 2.参数（没有参数，多个参数，一个参数）
        // 2.1 没有定义形参
        // 箭头函数中没有arguments，arguments是function函数独有的
        let fn2 = (...arg) => {
            // console.log(arguments);//ReferenceError: arguments is not defined
            console.log(arg);
        }

        fn2(10, 20, 100, 200);


        // 2.2 多个参数

        let fn3 = (a, b, c) => {
            console.log(a, b, c);
        }
        fn3(100, 200, 300);


        // 2.3 一个参数 (只有一个参数可以省小括号)

        let fn4 = a => {
            console.log(a);
        }
        fn4(100);


        // 3.返回值
        // 3.1 完整写法
        let fn5 = (a,b) => {
           console.log(a,b);
           return a+b;
        }
       console.log( fn5(100,200));

        //3.2 简写 (函数体中只有一行代码就是返回值)    可以省略return,省略了return并且要省略{}
        let fn6 = (a,b) => a+b;

       console.log(fn6(10,20));

        //3.3 返回对象
        // let fn7 = () => {
        //     return {name:"哈哈"};
        // }; 


        // 混乱问题 (不能去分清是箭头哈数大括号还是对象的大括号),利用小括号提升优先级即可
        let fn7 = () => ({name:"哈哈"});
       
       console.log( fn7());


    </script>
</body>

</html>